
<template>
  <div class="left">
    <img
      src="~assets/img/MusicDetailCard/needle.png"
      class="needle"
      :class="{
      'needleRotate':isPlay
    }"
      alt
    />
    <div class="disc flex3" :class="{'discAnimation':!isMusicLoad ,'puase':!isPlay}">
      <img src="~assets/img/MusicDetailCard/disc.png" alt />
      <img class="musicAvatar" :src="musicInfo.al.picUrl" v-if="musicInfo.al" alt />
      <img class="musicAvatar" src="~assets/img/test.jpg" v-else alt />
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: {
    musicInfo: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  computed: {
    ...mapState(["isPlay", "isMusicLoad"])
  }
};
</script>

<style scoped >
.left {
  margin: 60px 70px 0 0;
  width: 220px;
}
.needle {
  position: relative;
  left: 50%;
  width: 88px;
  height: 72px;
  z-index: 20;
  transition: all 1s;
  transform-origin: 5.3px 5.3px;
}
.needleRotate {
  transform-origin: 5.3px 5.3px;
  transform: rotate(22deg);
}
.disc {
  position: relative;
  width: 220px;
  height: 220px;
}
.disc img:first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.musicAvatar {
  width: 150px;
}

.discAnimation {
  animation: playing 25s linear infinite;
  animation-delay: 0.8s;
}
@keyframes playing {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.puase {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}
</style>
